<template>
  <div class="applyNow">
    <el-descriptions class="margin-top" title="车辆进出收费标准" :column="1" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          村民
        </template>
        <el-tag type="success">免费</el-tag>

      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          其他（除村民外）
        </template>

        <el-tag type="success" style="margin-bottom: 10px">3小时以内免费</el-tag>
        <br>
        <el-tag type="warning" >超出3小时 按5元/小时收费 20元封顶</el-tag>

      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          办理停车月租
        </template>
          <el-tag type="info" >300/月</el-tag>   <el-link type="primary" style="font-size: 12px;margin-left: 20px">点击办理</el-link>

      </el-descriptions-item>
    </el-descriptions>

    <div class="addVehicle">
      <el-form :model="vehicleForm" :rules="rules" ref="vehicleForm" label-width="100px" size="mini">
        <el-form-item label="车牌号" prop="veNumber">
          <el-input v-model="vehicleForm.veNumber"></el-input>
        </el-form-item>
        <el-form-item label="车主姓名" prop="veName">
          <el-input v-model="vehicleForm.veName"></el-input>
        </el-form-item>

        <el-form-item label="业务类型" prop="veType">
          <el-select v-model="vehicleForm.veType" placeholder="请选择业务类型">
            <el-option label="免费" value="1"></el-option>
            <el-option label="月租" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('vehicleForm')">立即申请</el-button>
          <el-button @click="resetForm('vehicleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>



  </div>
</template>

<script>
import {addVehicleApply} from "@/api/allApi";

export default {
  name: "ApplyNow",
  data() {
    return{
      user:{},
      vehicleForm:{

      },
      rules:{
        veNumber: [
          { required: true, message: '请输入车牌号', trigger: 'blur' },
        ],
        veName: [
          { required: true, message: '请输入车主姓名', trigger: 'blur' },
        ],
        veType: [
          { required: true, message: '请选择业务类型', trigger: 'change' }
        ],
      }
    }
  },
  created() {
    this.user = JSON.parse(window.localStorage.getItem('access-user'))
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.vehicleForm.userId = this.user.userId
          addVehicleApply(this.vehicleForm).then(res=>{
            if (res.data.success) {
              this.$message.success(res.data.data)
              this.$refs[formName].resetFields();
            }
            else {
              this.$message.error(res.data.data)
            }
          })
        } else {

          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="less" scoped>
  .addVehicle {
    margin-top: 40px;
    width: 400px;
  }
</style>